use crate::*;
use js_sys::Math::sign;
use leptos::leptos_dom::ev::SubmitEvent;
use leptos::logging;
use leptos::*;
use serde::{Deserialize, Serialize};
use serde_json::*;
use leptos::ev::suspend;
use tracing::{debug, error, info};


#[component]
pub fn DialogPage() -> impl IntoView {
    
    view! {
      <div align="center">
      <h2>"hello, tauri&leptos for Yee!"</h2>
      </div>
      <div align="left">
      <li> <a href="http://8.155.160.209:9994/yee/index" target="_blank"> 509/2509 </a> (8.155.160.209:9994) </li>
      <li> <a href="http://8.155.160.209:9995/yee/index" target="_blank"> 501/2501 </a> (8.155.160.209:9995)  </li>

      <li> <a href="http://www.mark.lengsh.cn:9994/yee/index" target="_blank"> 501/2501 </a> (mark.lengsh.cn:9994) </li>
      <li> <a href="http://www.mark.lengsh.cn:9995/yee/index" target="_blank"> 505/2505 </a> (mark.lengsh.cn:9995) </li>
      </div>
      <div align="center">
      <button on:click=move |_| {
        spawn_local(async move {
        let str = invoke_without_args("get_ask_dialog").await.as_string().unwrap_or_default();
        logging::log!("ask dialog: {}", str);

        });
      }>ask Dialog
      </button>
     
      <button on:click=move |_| {
        spawn_local(async move {
        let str = invoke_without_args("get_msg_dialog").await.as_string().unwrap_or_default();
        logging::log!("msg dialog: {}", str);

        });
      }>Msg Dialog
      </button>
    
      <button on:click=move |_| {
        spawn_local(async move {
        let str = invoke_without_args("get_file_dialog").await.as_string().unwrap_or_default();
        logging::log!("file dialog: {}", str);

        });
      }>File Dialog
      </button>
      <button on:click=move |_| {
        spawn_local(async move {
        let str = invoke_without_args("show_notify").await.as_string().unwrap_or_default();
        logging::log!("notify test: {}", str);

        });
      }>Notify Test
      </button>

      <button on:click=move |_| {
        spawn_local(async move {
        let str = invoke_without_args("store_abc").await.as_string().unwrap_or_default();
        logging::log!("store test: {}", str);
        });
      }>Store Test
      </button>

      <button on:click=move |_| {
        spawn_local(async move {
        let str = invoke_without_args("resource_abc").await.as_string().unwrap_or_default();
        logging::log!("resource test: {}", str);
        });
      }>Resource Test
      </button>


      <button on:click=move |_| {
        spawn_local(async move {
        let str = invoke_without_args("send_emit_abc").await.as_string().unwrap_or_default();
        logging::log!("event emit test: {}", str);
        });
      }>event Emit Test
      </button>

      <button on:click=move |_| {
      //let sign = window().prompt_with_message_and_default("Are you feeling lucky","sure").unwrap(); // open the window with Text "Are you feeling lucky" and default value "sure"
      //window().alert_with_message(&format!("You said? ")).unwrap();
      //logging::log!("prompt: {:?}", sign);
     
      let re = window().confirm_with_message("are you sure ?").unwrap();
      logging::log!("confirm: {}", re);

    }>confirm message  
    </button>
      </div>
      <div align="center">
      <ScriptView />
      </div>
    }
}

pub const RUST_CODE: &str = r#"fn main() {
  let number = 3;

  if number < 5 {
      println!("condition was true");
  } else {
      println!("condition was false");
  }
}

"#;

#[component]
pub fn ScriptView() -> impl IntoView {

    let js_hook1 = r#"
    function get_code() {
      return "leptos script in 1!";
    }
    console.log(get_code());   
    console.log("借助view！+ script，实现复杂的js hook 1");   
  "#;  


  let js_hook = r#"
    function get_code() {
      return "hello from leptos script!";
    }
    console.log(get_code());   
    console.log("借助view！+ script，实现复杂的js hook");   
  "#;  
  
  let code_view1 = move || {       
        view! {
              // 这里通过script载入js代码， 返回为HtmlElement元素；
              <script>{js_hook1}</script>
        }            
  };

  let code_view = move || {       
    let hook = view! {
        // 这里通过script载入js代码， 返回为HtmlElement元素；
        <script>{js_hook}</script>
    };
    view! {
        <pre><code class="language-rust">{ RUST_CODE }</code></pre>
    // 这里渲染Script HtmlElement元素；
        {hook}
    }                 
};
  
//  let (vdata, set_vdata) =  create_signal(vec![1,2,3,4,5,6]);
let vdata =  vec![1,2,3,4,4,4];
  view! {
      <For
      each= move || vdata.clone()
      key=|n| *n
      children=|data| view! { <p>{data}</p> }
      />
      {code_view1}
      <p>"Explanation on what is being demonstrated follows after the following code example table."</p>      
      <div id="code-demo">
          <table>
              <thead>
                  <tr>
                      <th>"Inline code block (part of this component)"</th>
                      <th>"Dynamic code block (loaded via server fn)"</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td><pre><code class="language-rust">{RUST_CODE}</code></pre></td>
                      <td>
                          <Suspense fallback=move || view! { <p>"Loading code example..."</p> }>
                              {code_view}
                          </Suspense>
                      </td>
                  </tr>
              </tbody>
          </table>
      </div>
  }
}

